<template>
  <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"
    border>
    <!-- 时间段列 -->
    <el-table-column label="时间段" width="120">
      <template #default="scope">{{ scope.row.timeperiod }}</template>
    </el-table-column>

    <!-- 中心值列 -->
    <el-table-column label="中心值" width="120">
      <template #default="scope">
        <el-input v-if="editingRow === scope.$index && editingField === ' limitmedian'" v-model="scope.row.limitmedian"
          size="small" @blur="saveEdit(scope.$index, ' limitmedian')" @keyup.enter="saveEdit(scope.$index, ' limitmedian')" />
        <div v-else @click="editRow(scope.$index, ' limitmedian')">
          {{ scope.row. limitmedian !== null && scope.row. limitmedian !== undefined ? scope.row. limitmedian : '0' }}
        </div>
      </template>
    </el-table-column>

    <!-- 浮动值列 -->
    <el-table-column label="浮动值">
      <template #default="scope">
        <el-input v-if="editingRow === scope.$index && editingField === ' lilimitfloat'" v-model="scope.row.lilimitfloat"
          size="small" @blur="saveEdit(scope.$index, ' lilimitfloat')" @keyup.enter="saveEdit(scope.$index, ' lilimitfloat')" />
        <div v-else @click="editRow(scope.$index, ' lilimitfloat')">
          {{ scope.row. lilimitfloat !== null && scope.row. lilimitfloat !== undefined ? scope.row. lilimitfloat : '0' }}
        </div>
      </template>
    </el-table-column>

    <!-- 低限列 -->
    <el-table-column property="lowlimit" label="低限" />

    <!-- 高限列 -->
    <el-table-column property="highlimit" label="高限" />
  </el-table>
</template>

<script lang="ts" setup>
interface FormNumberProps {
  float: String;
  center: String;
}
import { ref,defineProps ,onMounted, watchEffect} from 'vue'
import { ElTable, ElInput } from 'element-plus'
import bus from '../tools/eventBus'
interface FormNumbers {
  float: string
  center: string
}

const props = defineProps<{
  formNumbers: FormNumbers
}>()
 
const emit = defineEmits(['saveEdit']);
const siteId = ref('')
interface User {
  timeperiod: string
   limitmedian: number | null
   lilimitfloat: number | null
  lowlimit: number | null
  highlimit: number | null
  schemeId: number | null
  siteId: number | null
  dateTimes: number | null
}


// 表格数据
const tableData = ref( [
  { timeperiod: '00:00-01:00',  limitmedian: null,  limitfloat: null, lowlimit: null, highlimit: null,remark:'',monitorName:null,schemeId:'',dateTimes:'' },
  { timeperiod: '01:00-02:00',  limitmedian: null,  limitfloat: null, lowlimit: null, highlimit: null,remark:'',monitorName:null,schemeId:'',dateTimes:'' },
  { timeperiod: '02:00-03:00',  limitmedian: null,  limitfloat: null, lowlimit: null, highlimit: null,remark:'',monitorName:null,schemeId:'',dateTimes:'' },
  { timeperiod: '03:00-04:00',  limitmedian: null,  limitfloat: null, lowlimit: null, highlimit: null,remark:'',monitorName:null,schemeId:'',dateTimes:'' },
  { timeperiod: '04:00-05:00',  limitmedian: null,  limitfloat: null, lowlimit: null, highlimit: null,remark:'',monitorName:null,schemeId:'',dateTimes:'' },
  { timeperiod: '05:00-06:00',  limitmedian: null,  limitfloat: null, lowlimit: null, highlimit: null,remark:'',monitorName:null,schemeId:'',dateTimes:'' },
  { timeperiod: '06:00-07:00',  limitmedian: null,  limitfloat: null, lowlimit: null, highlimit: null,remark:'',monitorName:null,schemeId:'',dateTimes:'' },
  { timeperiod: '07:00-08:00',  limitmedian: null,  limitfloat: null, lowlimit: null, highlimit: null,remark:'',monitorName:null,schemeId:'',dateTimes:'' },
  { timeperiod: '08:00-09:00',  limitmedian: null,  limitfloat: null, lowlimit: null, highlimit: null,remark:'',monitorName:null,schemeId:'',dateTimes:'' },
  { timeperiod: '09:00-10:00',  limitmedian: null,  limitfloat: null, lowlimit: null, highlimit: null,remark:'',monitorName:null,schemeId:'',dateTimes:'' },
  { timeperiod: '10:00-11:00',  limitmedian: null,  limitfloat: null, lowlimit: null, highlimit: null,remark:'',monitorName:null,schemeId:'',dateTimes:'' },
  { timeperiod: '11:00-12:00',  limitmedian: null,  limitfloat: null, lowlimit: null, highlimit: null,remark:'',monitorName:null,schemeId:'',dateTimes:'' },
  { timeperiod: '12:00-13:00',  limitmedian: null,  limitfloat: null, lowlimit: null, highlimit: null,remark:'',monitorName:null,schemeId:'',dateTimes:'' },
  { timeperiod: '13:00-14:00',  limitmedian: null,  limitfloat: null, lowlimit: null, highlimit: null,remark:'',monitorName:null,schemeId:'',dateTimes:'' },
  { timeperiod: '14:00-15:00',  limitmedian: null,  limitfloat: null, lowlimit: null, highlimit: null,remark:'',monitorName:null,schemeId:'',dateTimes:'' },
  { timeperiod: '15:00-16:00',  limitmedian: null,  limitfloat: null, lowlimit: null, highlimit: null,remark:'',monitorName:null,schemeId:'',dateTimes:'' },
  { timeperiod: '16:00-17:00',  limitmedian: null,  limitfloat: null, lowlimit: null, highlimit: null,remark:'',monitorName:null,schemeId:'',dateTimes:'' },
  { timeperiod: '17:00-18:00',  limitmedian: null,  limitfloat: null, lowlimit: null, highlimit: null,remark:'',monitorName:null,schemeId:'',dateTimes:'' },
  { timeperiod: '18:00-19:00',  limitmedian: null,  limitfloat: null, lowlimit: null, highlimit: null,remark:'',monitorName:null,schemeId:'',dateTimes:'' },
  { timeperiod: '19:00-20:00',  limitmedian: null,  limitfloat: null, lowlimit: null, highlimit: null,remark:'',monitorName:null,schemeId:'',dateTimes:'' },
  { timeperiod: '20:00-21:00',  limitmedian: null,  limitfloat: null, lowlimit: null, highlimit: null,remark:'',monitorName:null,schemeId:'',dateTimes:'' },
  { timeperiod: '21:00-22:00',  limitmedian: null,  limitfloat: null, lowlimit: null, highlimit: null,remark:'',monitorName:null,schemeId:'',dateTimes:'' },
  { timeperiod: '22:00-23:00',  limitmedian: null,  limitfloat: null, lowlimit: null, highlimit: null,remark:'',monitorName:null,schemeId:'',dateTimes:'' },
  { timeperiod: '23:00-00:00',  limitmedian: null,  limitfloat: null, lowlimit: null, highlimit: null,remark:'',monitorName:null,schemeId:'',dateTimes:'' },
])

watchEffect(() => {
  console.log(props.formNumbers,'这是什么');
  
  if(props.formNumbers) {
    const centerValue = props.formNumbers.center;
    const floatValue = props.formNumbers.float;
    if(!centerValue || !floatValue) return
    const highLimit: any = parseFloat((+centerValue + +floatValue).toFixed(3))
    const lowLimit: any = parseFloat((+centerValue - +floatValue).toFixed(3))
    tableData.value.map(item => {    
      item.highlimit = highLimit;
      item.lowlimit = lowLimit;
    })
  }
})
// 管理表格引用
const multipleTableRef = ref<InstanceType<typeof ElTable>>()

// 用于跟踪选中的表格行
const multipleSelection = ref<User[]>([])

// 跟踪当前正在编辑的行和字段
const editingRow = ref<number | null>(null)
const editingField = ref<string>('')




// 处理表格选中项的变化
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}

// 进入编辑模式
const editRow = (index: number, field: string) => {
  editingRow.value = index
  editingField.value = field
}

// 保存编辑内容并退出编辑模式
const saveEdit = (index: number, field: string) => {
  if (field === ' limitmedian' || field === ' lilimitfloat' || field === 'schemeId') {
    const row = tableData.value[index]
    const centerValue = row.limitmedian ?? 0
    const floatValue = row.lilimitfloat ?? 0

    // 计算高限和低限
    const highLimit = parseFloat((+centerValue + +floatValue).toFixed(3))
    const lowLimit = parseFloat((+centerValue - +floatValue).toFixed(3))

    // 更新行数据
    row.highlimit = highLimit
    row.lowlimit = lowLimit
    // row.schemeId = siteId.value ;


  }
  // console.log(props.diaolgTable,'???????');

  emit('saveEdit', tableData.value)

  // 退出编辑模式
  editingRow.value = null
  editingField.value = ''
}



bus.on('eidtData', (data) => {

  // 创建一个 Map 以便快速查找
  const dataMap = new Map(data.revriced[0].map((item: { date: any; lowlimit: any; highlimit: any; schemeId: any }) => [item.date, item]));

  // 遍历 tableData 并更新 lowlimit 和 highlimit
  tableData.value.forEach((item, index) => {    
    const dataItem = dataMap.get(item.timeperiod);
    if (dataItem) {
      // 直接更新数据
      tableData.value[index] = {
        ...item, // 保留原有数据
        lowlimit: dataItem.lowlimit, // 更新 lowlimit
        highlimit: dataItem.highlimit, // 更新 highlimit
        // schemeId:siteId.value
      };
    }
  });

  // 触发视图更新
  // emit('saveEdit', tableData)

});

bus.on('data4', (val) => {
   console.log(val,'方案id');
})



</script>

<style scoped>
.el-input {
  width: 100%;
}
</style>
